<%@ page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Gestor de Ofertas para el Cliente</title>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/css/buttonOHC.css" />
<style>
div.error{
    background: #ffffcc;
    border: 2px solid red;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 13px;
    padding: 3px;
    text-align: left;
    vertical-align: bottom;
    width: 650px;
}

#loading-mask {
position: fixed;
left:     0;
top:      0;
width:    100%;
height:   100%;
z-index:  20000;
background-color: #DDEEFF;
filter:alpha(opacity=50);
opacity:0.5;

}

#loading {
position: fixed;
left:     50%;
top:      50%;
padding:  2px;
z-index:  20001;
height:   auto;
margin:   -35px 0 0 -30px;
}
 
#loading .loading-indicator {
background: url(images/loading.gif) no-repeat;
color:      #555;
font:       bold 13px tahoma,arial,helvetica;
padding:    8px 42px;
margin:     0;
text-align: center;
height:     auto;
}
</style>

<script src="<%=request.getContextPath()%>/js/jquery-1.7.1.js" type="text/javascript"></script>
</head>

<body topmargin=0 leftmargin=0 bgcolor=#1C2874>
<%
	Object messageError = request.getAttribute("messageError");
	if(messageError != null){
		if(messageError instanceof List){
			
			List listMsg = (List)messageError;
			if(!listMsg.isEmpty()){%>
				<br/>
				<center>
				<div class="error">
					<% 
					for(int i = 0; i < listMsg.size(); i++){%>
						<img alt="" src="images/icono_error.png" width="17px" height="17px" class="icon">
			    		<%=listMsg.get(i)%><br/>
					<%}
					%>	
				</div>
				</center>
			<%}			
			
		}else{
			if(!"".equals(messageError)){%>
				<br/>
				<center>
				<div class="error">
			    	<img alt="" src="images/icono_error.png" width="17px" height="17px" class="icon">
			    	<%=messageError%><br/>
			    </div>
			    </center>
			<%}
		}
	}
%>

<form method="post" name="formLogin" action="loginLDAP.do?method=validaUsuario">

<div id="loading-mask" style="display:none;"></div>
<div id="loading" style="display:none;">
<div class="loading-indicator">
<bean:message key="etiqueta.cargando"/>
</div>
</div>

	<table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
	<tr>
		<td colspan=3>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td valign=top width=784 height=413 background=imagenes/inicio.png>
			<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
			
			<table align="center">
			<tr><td style="font-family:Arial;font-size:13px">
			
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			Usuario:</td><td><input type="text" name="username" size="25" /></td></tr>
			<tr><td style="font-family:Arial;font-size:13px">
			
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			Contraseña:</td><td><input type="password" name="password" size="25" /></td></tr>
			</table>
			
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;			
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<a href="javascript:customValidateFormLogin();" class="buttonOHC">INGRESAR</a>&nbsp;
			<a href="javascript:document.formLogin.reset();" class="buttonOHC">LIMPIAR</a>&nbsp;
			<%--
			<a href="javascript:customValidateFormLogin();"><img src="imagenes/btningreso.JPG" border="0" width="80" height="20" border="0"></a>&nbsp;
			<a href="javascript:document.formLogin.reset();"><img src="imagenes/btnlimpiar.JPG" border="0" width="80" height="20" border="0"></a>
			--%>
		</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td colspan=3>&nbsp;</td>
	</tr>
	</table>
</form>
</body>
<script type="text/javascript" charset="UTF-8">

//frk: si presionamos el ENTER
$(document).keyup(function(e) {
  var tecla = (document.all) ? e.keyCode : e.which; 
  if (tecla == 13) {
	  customValidateFormLogin();
  }
});

function showLoading(){
	var div1 = document.getElementById('loading-mask');
	var div2 = document.getElementById('loading');
	
	div1.style.display = "";
	div2.style.display = "";
}

function customValidateFormLogin(){
	
	var username = document.forms['formLogin'].username.value;
	var password = document.forms['formLogin'].password.value;
	
	if($.trim(username) == '' || username == null){
		alert('El usuario es un campo obligatorio.');
	}else if($.trim(password) == '' || password == null){
		alert('La contraseña es un campo obligatorio.');
	}else{
		showLoading();
		document.formLogin.submit();
	}
}

</script>
</html>